<template>
    <el-dialog :title="popTitle.title" :visible.sync="siteshow" width="50% !important" :show-close="false" :close-on-click-modal="false">
        <!-- <template>
            <el-transfer filterable :titles="['未选中站点', '已选中站点']" filter-placeholder="请输入站点" v-model="value" :data="data">
            </el-transfer>
        </template> -->
        <template>
            <div>
                <tree-transfer node_key="id" :mode="mode" :title="['未选中站点 : ' + data.length, '已选中站点 : ' + siteval.length]"
                    ref="transfer" :from_data="data" :to_data="siteval" :defaultProps="{ label: 'label' }" filter
                    height="487px" @add-btn="add" @remove-btn="remove" @left-check-change="onLeftChange"
                    @right-check-change="onRightChange" class="permission__tree-transfer">
                </tree-transfer>
            </div>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelWorkOrder">取 消</el-button>
            <el-button type="primary" @click="determineWorkOrder">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import treeTransfer from 'el-tree-transfer'
import { getData } from '@/api/table'
import { Message } from 'element-ui'

export default {
    components: {
        treeTransfer
    },
    props: {
        siteshow: {
            type: Boolean,
            required: true,
        },
        popTitle: {
            type: Object,
            required: true,
        },
        params: {
            type: Object,
            required: true,
        },
        data: {
            type: Array,
            required: true
        },
        siteval: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            mode: 'transfer', // 现有树形穿梭框模式transfer 和通讯录模式addressList
            selectedKeys: [],   // 选择的keys
            removedKeys: [],   // 移除的keys
            saveSelectedSourceIds: [],
            // value: [],
            // jurItem: '',
            // formdata: null,
            // url: '',
            tit: ['未选中站点', '已选中站点'],
        };
    },
    computed: {

    },
    watch: {
        fromData: {
            handler() {
                if (this.data && this.data.length > 0) {
                    if (this.tit[0] === "已选中站点") {
                        this.dealUserRoleTypeTreeData(this.data);
                    } else {
                        this.dealSourceTreeData(this.data);
                    }
                }
            },
            // immediate : true
        }
    },
    mounted() {

    },
    methods: {
        onLeftChange() {
            const treeTransfer = this.$refs.transfer.$refs['wl-transfer-component'];
            const fromTree = treeTransfer.$refs['from-tree'];
            const fromTreeCheckedKeys = fromTree.getCheckedKeys(true);
            const _fromTreeCheckedKeys = fromTreeCheckedKeys.filter(node => {
                return fromTree.getNode(node).visible;
            });
            fromTree.setCheckedKeys(_fromTreeCheckedKeys);
        },
        onRightChange() {
            const treeTransfer = this.$refs.transfer.$refs['wl-transfer-component'];
            const toTree = treeTransfer.$refs['to-tree'];
            const toTreeCheckedKeys = toTree.getCheckedKeys(true);
            const _toTreeCheckedKeys = toTreeCheckedKeys.filter(node => {
                return toTree.getNode(node).visible;
            });
            toTree.setCheckedKeys(_toTreeCheckedKeys);
        },
        add(data, siteval, obj) {
            if (this.tit[0] === "可选用户") {
                if (obj.nodes && obj.nodes.length > 0) {
                    obj.nodes.forEach(item => {
                        if (!(item.children && item.children.length > 0)) {
                            this.selectedKeys.push(item.id);
                        }
                    })
                }
            } else {
                // 分配资源
                // harfKeys 存储所有父级
                // this.selectedKeys = [...obj.harfKeys,...obj.keys];
                this.selectedKeys.push(...obj.harfKeys, ...obj.keys);
                // this.selectedKeys = this.filterArr(this.selectedKeys);
            }

        },
        remove(data, siteval, obj) {
            console.log(obj.keys);
            obj.keys.forEach(item => {
                this.selectedKeys = this.selectedKeys.filter(item1 => item1 !== item)
            })
            if (this.tit[0] === "可选用户") {
                if (obj.nodes && obj.nodes.length > 0) {
                    obj.nodes.forEach(item => {
                        if (!(item.children && item.children.length > 0)) {
                            this.removedKeys.push(item.id);
                        }
                    })
                }
                this.dealUserTreeData(this.data);
            } else {
                // 分配资源
                this.removedKeys.push(...obj.keys);
                // this.removedKeys = this.filterArr(this.removedKeys);
                this.dealSourceTreeData(this.data);
            }
            // this.$message.success("移除成功！");
            // 将之前已经选中的 移除到左边  左边禁用的 需要重新 可选
            // console.log(this.removedKeys, '移除成功！', obj);
        },
        dealSourceTreeData(treeData) {
            treeData && treeData.length > 0 && treeData.forEach(item => {
                if (item.children && item.children.length > 0) {
                    this.dealSourceTreeData(item.children);
                } else {
                    if (this.siteval && this.siteval.length > 0) {
                        this.saveSelectedSourceIds = [];  // 这块需要清空
                        this.collectBottomIds(this.siteval);
                        if (this.saveSelectedSourceIds.includes(item.id)) {
                            item.disabled = true;
                        } else {
                            item.disabled = false;
                        }
                    } else {
                        item.disabled = false;
                    }
                }
            })
        },
        dealUserTreeData(treeData) {
            treeData && treeData.length > 0 && treeData.forEach(item => {
                if (item.children && item.children.length > 0) {
                    this.dealUserTreeData(item.children);
                } else {
                    // 这块逻辑必须和过滤系统、业务的  规则 区别开
                    // 右边移除到左边的数据可以再次点击
                    if (this.siteval && this.siteval.length > 0) {
                        let ids = this.siteval.map(toItem => toItem.id);
                        // this.collectBottomIds(this.siteval);
                        if (ids.includes(item.id)) {
                            item.disabled = true;
                        } else {
                            item.disabled = false;
                        }
                    } else {
                        item.disabled = false;
                    }
                }
            })
        },
        collectBottomIds(treeData) {
            treeData.forEach(item => {
                if (item.children && item.children.length > 0) {
                    this.collectBottomIds(item.children);
                } else {
                    this.saveSelectedSourceIds.push(item.id);
                }
            });
        },

        cancelWorkOrder() {
            this.$emit('site-event', false);
        },
        determineWorkOrder() {
            const url = '/equipment/allocateData';
            const met = 'POST';
            let formdata = new FormData();
            let formkyes = []
            this.siteval.forEach(item => {
                formkyes.push(item.id)
            })
            let newArr = [...new Set([...this.selectedKeys, ...formkyes])]
            // console.log(newArr);
            let formval = ''
            newArr.forEach(item => {
                formval += item + ','
            })
            console.log(formval);
            formdata.append('equipmentIds', formval)
            getData(url, met, formdata).then(res => {
                console.log(res);
                Message({
                    message: res.msg,
                    type: 'success',
                    duration: 3 * 1000
                })
            })
            this.selectedKeys = []
            this.$emit('site-event', false);
        }
    },
    created() {
    }
};
</script>

<style  scoped></style>